html,body{
	width: 100%;
	height: 100%;
	max-width: 667px!important;
	max-height: 375px!important;
	overflow: hidden;
	background-color: #a4d5fd;
}

.board{
	width: 78px;
	height: 199px;
	background: url(./../../assets/games/board.png) center center no-repeat /cover;
	.target{
		width: 49px;
		height: 44px;
		background: url(./../../assets/games/frame.png) center center no-repeat /cover;
		z-index: 1;
	}
}


.games-wrap{
	/*width: 100vw;
	height: 100vh;*/
	width: 100%;
	height: 100%;
	max-width: 667px!important;
	max-height: 375px!important;
	background: url(./../../assets/games/bg.jpg) center center no-repeat /cover;
	/*background-color: #06facc;*/
	position: fixed;
	left: 0; right: 0;
	top: 0; bottom: 0;
	z-index: 99;
	user-select: none;
	>*{
		position: absolute;
	}
	p{
		position: fixed;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		&:nth-child(2){
			top: 1em;
		}
	}

}

.slider-wrap{
	position: fixed;
	right: 10vw;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99;
	.goal{
		position: absolute;
		width: 4px;
		height: 20px;
		left: 50%;
		top: 50%;
		z-index: 1;
		transform: translateX(-50%);
		background-color: red;	
		span{
			display: block;
			position: absolute;
			left: .7em;
			top: -0.5em;
			&:last-child{
				top: auto;
				bottom: -0.5em;
			}	
		}	

	}
	.ant-slider-disabled .ant-slider-track{
		background-color: blue!important;
	}
	.ant-slider-disabled .ant-slider-track,
	.ant-slider-disabled .ant-slider-handle, 
	.ant-slider-disabled .ant-slider-dot{
		z-index: 2;
	}
}

.result-wrap{
	position: fixed;
	left: 10vw; right: 10vw;
	bottom: 2vh;
	z-index: 99;
}


.portrait{
	transform: rotate(90deg);
}


.arm-wrap{
	position: absolute;
	width: 15vw;
	height: 1vh;
	background: #333;
	left: 10vw;
	bottom: 10vw;
	font-size: 0;
	transition: all .2s;
	transform-origin: 100% 50%;
	&.active{
		animation: arm .15s linear;
		animation-fill-mode: forwards;
	}
}

.ball{
	position: absolute;
	width: 5vw;
	height: 5vw;
	background: #333;
	/*left: 10vw;*/
	/*bottom: 10vw;*/
	border-radius: 50%;
	transition: all .4s;
	transform-origin: 50vw 50vh;
	&.active{
		animation: ball .6s linear;
		/*animation: ball 1s cubic-bezier(0, 0, 0.52, 0.97);*/
		animation-fill-mode: forwards;
		/*transform: rotate(70deg);*/
	}

}


.ball-frame{
	position: absolute;
	width: 5vw;
	height: 5vw;
	right: 20vw;
	top: 20vw;
	border-radius: 50%;
	border: 2px solid #fff;
}



/*ball的动画*/
@keyframes arm {
	0%{
		transform: rotate(0);
	}
	
	100% {
		transform: rotate(40deg);
	}
}





/*ball的动画*/
@keyframes ball {
	0%{
		transform: rotate(0);
	}
	60% {
		transform: rotate(70deg);
	}
	100% {
		transform: rotate(90deg) translate(25vw, 5vh);
		/*transform-origin: 65vw 120vh;*/
	}
}
